<template>
	<div id="app">
		<el-container>
			<el-header>
				<el-row>
					<el-col :span="12">
						<div class="grid-content">
							<img class="top" src="../assets/logo2.png" width="50px" alt="logo">
							<h3 class="top" style="margin-left: 5px;">客户关系管理系统</h3>
						</div>
					</el-col>
					<el-col :span="12">
						<div class=" bg-purple">
							<h5 class="user">
								当前用户：{{namea}}（{{names}}）
								<a href="/" @click="logOut" style="color: white;text-decoration: none;">退出</a>
							</h5>
						</div>
					</el-col>
				</el-row>
			</el-header>
			<el-container>
				<el-aside>
					<el-tree :data="menu" @node-click="open" :icon-class="'el-icon-s-unfold'"
						:default-expanded-keys="openKey" accordion node-key="id" :default-expand-all="isOpen" ref="tree"
						highlight-current :props="defaultProps"></el-tree>
				</el-aside>
				<el-main>
					<el-breadcrumb id="Bread" separator="/">
						<template v-for="(bread,index) in breadcrumb">
							<el-breadcrumb-item :key="index" :replace="true" :to="{ name: bread.name }">
								<a href="javascript:;"></a>
							</el-breadcrumb-item>
						</template>
					</el-breadcrumb>
					<router-view :msg="msg"></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: "app",
		data() {
			return {
				names: '',
				namea: '',
				userId: '',
				isOpen: true,
				openKey: [],
				menu: [],
				msg: "",
				breadcrumb: [],
				defaultProps: {
					children: "children",
					label: "name"
				}
			};
		},
		methods: {
			open(obj, node, self) {
				this.$refs.tree.setCheckedKeys([]);
				if (obj.level > 1) {
					this.$router.replace({
						name: obj.code
					});
					this.msg = obj.name;
					this.$refs.tree.setCheckedNodes([obj]);
				}
			},
			biasCount(str) {
				let count = 0;
				let index = str.indexOf('/');
				while (index !== -1) {
					count++;
					index = str.indexOf('/', index + 1);
				}
				return count;
			}, logOut() {
				localStorage.clear();
				sessionStorage.clear();
				this.$http.get("/sys-user/updateByid", {
					params: {
						id: this.userId,
						isOnline: 0
					}
				});
			}
		},
		computed: {
			navListener() {
				let _this = this;
				let navName = this.$route.name;
				let navTitle = this.$route.meta.title;
			}
		},
		created() {
			let _this = this;
			if(localStorage.getItem("nId") == 5){
				this.isOpen = false;
				this.openKey = [27];
			}
			_this.$http.get("/menuitem/show?id=" + localStorage.getItem("nId")).then(function (ret) {
				_this.menu = ret.data
				if (localStorage.getItem("state") === 'login') {
					_this.$router.replace("/Home");
				}
				localStorage.removeItem("state");
			});
			this.namea = localStorage.getItem("myToken");
			this.names = localStorage.getItem("reloname");
			this.userId = localStorage.getItem("userId");
		}, watch: {
			// $route: {
			// 	handler: function (to, from) {
			// 		let tPath = to.path;    //跳转的路由地址
			// 		let fPath = from.path;  //当前的路由地址
			// 		let bread = {   //导航面包屑对象
			// 			name: to.name,
			// 			title: to.meta.title,
			// 			query: to.query
			// 		};
			// 		let toPackage = this.biasCount(tPath);
			// 		let fromPackage = this.biasCount(fPath);
			// 		let startIndex = toPackage.count - 1; //删除面包屑数组的开始下标
			// 		let spliceLength = fromPackage.count - startIndex - 1;  //删除的个数
			// 		console.log(toPackage, fromPackage);
			// 		if (toPackage.handleStr === '') {
			// 			this.breadcrumb.splice(0, this.breadcrumb.length);
			// 			this.breadcrumb.push(bread);
			// 			console.log('添加');
			// 		} else if (toPackage.count > fromPackage.count && tPath.startsWith(fromPackage.handleStr)) {
			// 			this.breadcrumb.push(bread);
			// 			console.log('前进');
			// 		} else {
			// 			this.breadcrumb.splice(startIndex, spliceLength);
			// 			console.log('后退');
			// 		}
			// 		console.log(to, from);
			// 	}
			// }
		}
	};
</script>

<style>
	body {
		margin: 0;
		padding: 0;
	}

	.el-header {
		background-color: #409eff;
		color: white;
	}

	.bg-purple {
		float: right;
	}

	.grid-content {
		margin-top: -5px;
	}

	.el-aside {
		background-color: #ffffff;
		color: #333;
		text-align: center;
		border-right: #D8D8D8;
		width: 300px !important;
		min-height: 690px;
	}

	.el-main {
		background-color: #FBFBFB;
		color: #333;
	}

	.el-tree {
		background: #fff0 !important;
	}

	/* 为对应的路由跳转时设置动画效果 */
	.fade-enter-active,
	.fade-leave-avtive {
		transition: opacity 1s
	}

	.fade-enter,
	.fade-leave-to {
		opacity: 0.5
	}

	.top {
		display: inline-block;
		vertical-align: middle;
	}

	.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
		background-color: #f6f6f6 !important;
	}

	.el-tree-node__label {
		font-size: 18px !important;
	}

	.el-tree-node__content {
		height: 45px !important;
	}
</style>